<template>
    <div>
        <!--
       <ul>
           <li>-</li>
           <li>{{count}}</li>
           <li>+</li>
       </ul>
        -->
        <div class="left" @click="substrict">-</div>
        <div class="middle">{{count}}</div>
        <div class="right" @click="add">+</div>
    </div>
</template>

<style scoped>
    /**
   ul{
       margin:0px;
       padding:0px;
   }

   li{
       list-style: none;
       display: inline-block;
       border: 1px solid rgba(92, 92, 92, 0.3);
       text-align: center;
       height: 35px;
       line-height: 35px;
       width: 30px;
       padding: 0px;
       margin: 0px;
   }
   **/

    .left,
    .middle,
    .right {
        display: inline-block;
        border: 1px solid rgba(92, 92, 92, 0.3);
        text-align: center;
        height: 30px;
        line-height: 30px;
        width: 30px;
    }

    .middle {
        width: 35px;
    }
</style>

<script>
    export default {
        data() {
            return {
                count:1
            }
        },
        props: ['goods'],
        created() {
            this.count = this.goods.buycount
        },
        methods: {
            substrict() {
                if(this.count<=1){
                    return
                }

                this.count--

                this.notify()
            },
            add(){
                this.count++

                this.notify()
            },
            notify(){
                this.$emit('goodsCountChange',{goodsId:this.goods.id,count:this.count})
            }
        }
    }
</script>